<template>
  <el-dialog
    :title="addNoteDialogData.params.title"
    :visible.sync="addNoteDialogData.isShow"
    width="480px"
    :before-close="labelHandleClose"
    @closed="cancelLabel"
  >
    <div class="form-box">
      <el-form
        ref="addNoteForm"
        :model="addNoteForm"
        label-width="80px"
        :rules="addNoteFormRules"
        @submit.native.prevent
      >
        <el-form-item label="备注:" prop="remark">
          <el-input
            clearable
            v-model="addNoteForm.remark"
            maxlength="10"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="addNoteDialogData.isShow = false"
        >取 消</el-button
      >
      <el-button
        type="success"
        class="add-note"
        :loading="loading"
        @click="addNote('addNoteForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { addNoteAPI } from '@/api/vestManagement/vestManage' // 接口
import { validateSpecial } from '@utils/validate'
export default {
  props: ['addNoteDialogData'],
  data() {
    //校验马甲备注
    var valiRemark = (rule, value, callback) => {
      if (!validateSpecial(value)) {
        callback(new Error('马甲备注只能使用汉字、字母或数字'))
      }
      callback()
    }
    return {
      loading: false,
      // 表单数据
      addNoteForm: {
        remark: ''
      },
      // 表单验证规则
      addNoteFormRules: {
        remark: [
          { required: true, message: '备注不能为空', trigger: 'blur' },
          { validator: valiRemark, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.id = this.addNoteDialogData.params.id
    if (this.addNoteDialogData.params.remark) {
      this.addNoteForm.remark = this.addNoteDialogData.params.remark
    }
  },
  methods: {
    /* 确认提交 */
    addNote(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = false
          let obj = { ...this.addNoteForm }
          // obj.bindId = this.id
          addNoteAPI(
            this.id,
            obj,
            (response) => {
              this.loading = false
              this.$emit('refresh')
              this.cancelLabel()
            },
            (response) => {
              this.loading = false
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        } else {
          return false
        }
      })
    },

    // 对话框关闭 清空数据
    cancelLabel() {
      this.loading = false
      this.addNoteDialogData.isShow = false
      this.addNoteDialogData.params.title = ''
      this.addNoteDialogData.params.id = ''
      this.addNoteDialogData.params.remark = ''
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    }
    // // 打开对话框
    // openDialog() {
    //   // 编辑备注同步数据
    //   if (this.addNoteDialogData.params.remark) {
    //     this.addNoteForm.remark = this.addNoteDialogData.params.remark
    //   }
    // }
  }
}
</script>
<style lang="less" scoped></style>
